import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { StyledSplit } from 'style'
import { projectLabelView as projectDuck } from 'ducks'
import Root from 'canvas'
import AnnList from './annList'

const Board = ({ isItemInit }) => (
  <React.Fragment>
    {isItemInit && (
      <StyledSplit split="vertical" minSize={240} defaultSize={300}>
        <AnnList />
        <Root />
      </StyledSplit>
    )}
  </React.Fragment>
)

Board.propTypes = {
  isItemInit: PropTypes.bool.isRequired,
}

const mapStateToProps = state => ({
  isItemInit: projectDuck.selectors.isItemInit(state),
})

export default connect(mapStateToProps)(Board)
